<template>
    <div>
        <h2>增加会员信息</h2>
        <table class="table table-bordered">
            <tr>
                <td>会员名称</td>
                <td>
                    <input type="text" placeholder="请输入会员名称" v-model="state.memberInfoName">
                </td>
            </tr>
            <tr>
                <td>会员手机号</td>
                <td><input type="text" placeholder="请输入会员手机号" maxlength="11" v-model="state.memberInfoPhone"></td>
            </tr>
            <tr>
                <td>会员性别</td>
                <td>
                    <input type="radio" name="sex" v-model="state.memberInfoSex" value="男">男
                    <input type="radio" name="sex" v-model="state.memberInfoSex" value="女">女
                </td>
            </tr>
            <tr>
                <td>会员图片</td>
                <td>
                    <input type="file" @change="photochange">
                    <img :src="src!=''" v-if="'https://localhost:7088'+src" alt="" width="70" height="70">
                </td>
            </tr>
            <tr>
                <td>备注</td>
                <td>
                    <textarea v-model="state.inter"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="增加" @click="add">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios  from 'axios';
import { reactive,toRefs,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const data = reactive({
    state:{
  "memberInfoName": "",
  "memberInfoPhone": "",
  "memberInfoSex": "",
  "memberPhoto": "",
  "createDate": "2024-09-09T02:55:55.724Z",
  "updateDate": "2024-09-09T02:55:55.724Z",
  "intergral": 0,
  "money": 0,
  "inter": "",
  "state": 0,
  "isDeleted": false
    },
    src:''
})

const {state,src} = toRefs(data);

//图片上传
const photochange = (e:any) => {
    console.log(e);
    let formdata=new FormData();
    formdata.append('file',e.target.files[0]);
    axios({
        url:'/api/Upload/UpFile',
        method:'post',
        data:formdata
    })
    .then(res => {
        console.log(res);
        if(res.data.code==1002)
        {
            alert('上传的不是图片');
           return;
        }
        else if(res.data.code==1001)
        {
            alert('上传图片大小不能超过2M');
            return;
        }
        else{
            alert('上传成功');
            state.value.memberPhoto = res.data.data;
            src.value =res.data.data;
        }
        
    })
    .catch(err => {
        console.log(err);
    })
}




//添加
const add = () => {
    if(state.value.memberInfoName=='')
    {
        alert('会员名称不能为空');
            return;
    }
    if(state.value.memberInfoPhone=='')
    {
        alert('会员手机号不能为空');
            return;
    }
    let reg= /^1[3-9]\d{9}$/;
    if(!reg.test(state.value.memberInfoPhone))
    {
        alert('会员手机号格式不正确');
            return;
    }
    if(state.value.memberInfoSex=='')
    {
        alert('会员性别不能为空');
            return;
    }
    if(state.value.memberPhoto=='')
    {
        alert('会员图片不能为空');
            return;
    }
    if(state.value.inter=='')
    {
        alert('备注不能为空');
            return;
    }
    axios({
        url:'/api/Member/AddMemberInfo',
        method:'post',
        data:state.value
    })
    .then(res => {
        console.log(res);
        if(res.data.data>0)
        {
            alert('增加成功');
            router.push('/ShowMember');
        }
        else if(res.data.data==0)
        {
            alert('会员名称不能重复');
            return;
        }
        else{
            alert('增加失败');
            return;
        }
    })
    .catch(err => {
        console.log(err);
    })
}

</script>

<style scoped>

</style>